<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html lang="zh">
<head>
    <%@include file="/lyear/common/head.jsp" %>
    <style>
        .lyear-wrapper {
            position: relative;
        }

        .lyear-login {
            display: flex !important;
            min-height: 100vh;
            align-items: center !important;
            justify-content: center !important;
        }

        
        .lyear-login:after {
            content: '';
            min-height: inherit;
            font-size: 0;
        }

        .login-center {
            background-color: rgba(255, 255, 255, .075);
            min-width: 29.25rem;
            padding: 2.14286em 3.57143em;
            border-radius: 3px;
            margin: 2.85714em;
        }

        .login-header {
            margin-bottom: 1.5rem !important;
        }

        .login-center .has-feedback.feedback-left .form-control {
            padding-left: 38px;
            padding-right: 12px;
            background-color: rgba(255, 255, 255, .075);
            border-color: rgba(255, 255, 255, .075)
        }

        .login-center .has-feedback.feedback-left .form-control-feedback {
            left: 0;
            right: auto;
            width: 38px;
            height: 38px;
            line-height: 38px;
            z-index: 4;
            color: #dcdcdc;
        }

        .login-center .has-feedback.feedback-left.row .form-control-feedback {
            left: 15px;
        }

        .login-center .form-control::-webkit-input-placeholder {
            color: rgba(255, 255, 255, .8);
        }

        .login-center .form-control:-moz-placeholder {
            color: rgba(255, 255, 255, .8);
        }

        .login-center .form-control::-moz-placeholder {
            color: rgba(255, 255, 255, .8);
        }

        .login-center .form-control:-ms-input-placeholder {
            color: rgba(255, 255, 255, .8);
        }

        .login-center .custom-control-label::before {
            background: rgba(0, 0, 0, 0.3);
            border-color: rgba(0, 0, 0, 0.1);
        }

        .login-center .lyear-checkbox span::before {
            border-color: rgba(255, 255, 255, .075)
        }
    </style>
</head>

<body>
<div class="row lyear-wrapper" style="background-image: url(lyear/images/login-bg-2.jpg); background-size: cover;">
    <div class="lyear-login">
        <div class="login-center">
            <div class="login-header text-center">
                <%-- <a href="index.jsp"> <img alt="light year admin" src="lyear/images/logo-sidebar.png"> </a>--%>
            </div>
            <form action="#!" method="post">
                <div class="form-group has-feedback feedback-left">
                    <input type="text" placeholder="请输入您的登录名" class="form-control" name="username" id="username"/>
                    <span class="mdi mdi-account form-control-feedback" aria-hidden="true"></span>
                </div>
                <div class="form-group has-feedback feedback-left">
                    <input type="password" placeholder="请输入密码" class="form-control" id="password" name="password"/>
                    <span class="mdi mdi-lock form-control-feedback" aria-hidden="true"></span>
                </div>
                <%--                <div class="form-group has-feedback feedback-left row">--%>
                <%--                    <div class="col-xs-7">--%>
                <%--                        <input type="text"  id="verification" name="captcha" class="form-control" placeholder="验证码" style="width: 73%">--%>
                <%--                        <span class="mdi mdi-check-all form-control-feedback" aria-hidden="true"></span>--%>
                <%--                    </div>--%>
                <%--                    <div class="col-xs-5">--%>
                <%--&lt;%&ndash;                        <img src="${pageContext.request.contextPath}/user/getVerifyCode" class="pull-right" id="captcha" style="width: 27%;cursor: pointer;display: inline-block" onclick="this.src=this.src+'?d='+Math.random();" title="点击刷新" alt="captcha">&ndash;%&gt;--%>
                <%--                        &lt;%&ndash;            <img src="lyear/images/captcha.png" class="pull-right" id="captcha" style="cursor: pointer;" onclick="this.src=this.src+'?d='+Math.random();" title="点击刷新" alt="captcha">&ndash;%&gt;--%>
                <%--                        <img class="verifyCode" id="verifyCode" onclick="changeCode()" src="${pageContext.request.contextPath}/user/yanzheng">--%>
                <%--                    </div>--%>
                <%--                </div>--%>
                <div class="form-group has-feedback feedback-left">
                    <input type="text" placeholder="验证码" style="width: 73%;display: inline-block;" class="form-control"
                           id="verifyCodeInput" name="verifyCode" onblur="checkVerifyCode()"/>
                    <span class="mdi mdi-verified form-control-feedback" aria-hidden="true"></span>
                    <img src="${pageContext.request.contextPath}/account/getVerifyCode" class="pull-right" id="captcha"
                         style="width: 27%;cursor: pointer;display: inline-block"
                         onclick="this.src=this.src+'?d='+Math.random();" title="点击刷新" alt="captcha">
                    <div id="verifyCode_prompt" style="color: red"></div>
                </div>
                <div id="CheckMsg" class="msg" style="color:red;"></div>
                <div class="form-group">
                    <button id="submit" class="btn btn-block btn-primary" type="button"
                            onclick="return check(this.form)">立即登录
                    </button>
                </div>
            </form>
            <div>
                <span style="color: black">没有账号？</span><a href="regist.jsp">点此注册</a>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="lyear/js/md5.js"></script>
<script type="text/javascript" src="lyear/js/jquery.min.js"></script>
<script type="text/javascript" src="lyear/js/bootstrap.min.js"></script>
<script type="text/javascript">;</script>
<script type="text/javascript">
    //验证表单是否为空，若为空则将焦点聚焦在input表单上，否则表单通过，登录成功
    let verifyCodeRes = false;

    function check(form) {
        let verification = $("#verifyCodeInput").val();
        var accountName = $("#username"), $password = $("#password");
        var accountName = accountName.val(), password = $password.val();
        if (!accountName || accountName == "") {
            showMsg("请输入登录名");
            $(form.accountName).focus();
            return false;
        }
        if (!password || password == "") {
            showMsg("请输入密码");
            form.password.focus();
            return false;
        }
        checkVerifyCode();
        if (verifyCodeRes == false) {
            return false;
        }

//这里为用ajax获取用户信息并进行验证，如果账户密码不匹配则登录失败，如不需要验证用户信息，这段可不写
        $.ajax({
            url: '/projshow/account/login',// 获取自己系统后台用户信息接口
            data: {"account": accountName, "password": password, "verification": verification},
            type: "GET",
            dataType: "json",
            success: function (data) {
                if (data) {
                    if (data.code == "200") { //判断返回值，这里根据的业务内容可做调整
                        setTimeout(function () {//做延时以便显示登录状态值
                            // showMsg("正在登录中...");
                            // console.log(data);
                            //alert("登录成功");
                            window.location.href = "${pageContext.request.contextPath}/account/index";//指向登录的页面地址
                        }, 100)
                    } else {
                        showMsg(data.msg);

                        //显示登录失败的原因
                        return false;
                    }
                }
            },
            error: function (data) {
                showMsg(data.msg);
            }
        });
    }

    //错误信息提醒
    function showMsg(msg) {
        $("#CheckMsg").text(msg);
    }

    //监听回车键提交
    $(function () {
        document.onkeydown = keyDownSearch;

        function keyDownSearch(e) {
            // 兼容FF和IE和Opera
            var theEvent = e || window.event;
            var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
            if (code == 13) {
                $('#submit').click();//具体处理函数
                return false;
            }
            return true;
        }
    });

    /**
     * 校验验证码
     */
    function checkVerifyCode() {
        let verifyCode = $("#verifyCodeInput").val();
        $.ajax({
            url: "/projshow/account/checkVerifyCode",
            data: {verifyCode: verifyCode},
            type: "GET",
            dataType: "json",
            success: function (res) {
                if (res.code == 200) {
                    verifyCodeRes = true;
                    $("#verifyCode_prompt").html(res.msg).css("color", "green").hide(2000);
                } else {
                    verifyCodeRes = false;
                    $("#verifyCode_prompt").html(res.msg).css("color", "red").show();
                }
            }
        })
    }

    // function changeCode() {
    //
    //     var src = "http://localhost:8080/projshow/user/yanzheng"
    //     $.ajax({
    //         url: '/projshow/user/yanzheng'
    //     });
    //     $('#verifyCode').attr("src", src);
    //
    // }


</script>


</body>
</html>